<template>
  <section>
    <div class="container">
      <div class="container-body pd">
        <el-row :gutter="5">
          <el-col :span="4">
            <el-upload
                class="upload-demo"
                action="#"
                :show-file-list="false"
                :http-request="bigExpres">
                <el-button size="small"
              class="btnAdd" type="warning">批量修改大件快递信息</el-button>
            </el-upload>
          </el-col>
          <el-col :span="5">
            <el-button
              type="warning"
              class="btnAdd"
              size="small"
              @click="bigExport()"
              >大件兑换导出</el-button
            >
          </el-col>
         </el-row>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="goodsName" label="商品名称" align="center">
          </el-table-column>
          <el-table-column prop="name" label="领取人姓名" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="领取人手机" align="center">
          </el-table-column>
          <el-table-column prop="area" label="省市区" align="center">
          </el-table-column>
          <el-table-column prop="address" label="详细地址" align="center">
          </el-table-column>
          <el-table-column prop="num" label="数量" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="兑换时间" align="center">
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          >
          </el-pagination>
          <div class="clear"></div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      total: 0,
      tableData: [],
      loading: true,
    };
  },
  created() {
    this.GetTbExchangeBigNumList(this.searchForm);
  },
  methods: {
    onSubmit() {},

    async GetTbExchangeBigNumList() {
      this.loading = true;
      let skip = (this.page - 1) * 10;
      // 请求案例
      let res = await this.$store.dispatch("GetTbExchangeBigNumList", {
        skip,
      });
      if (res.success) {
        this.tableData = res.data.itmes || [];
        this.total = res.data.totalCount;
      } else {
                this.$message.error(res.ErrorMessage || '网络异常');
              }
      this.loading = false;
    },
    async bigExport() {
      // this.loading = true;
      // 请求案例
      let res = await this.$store.dispatch("bigExport", {
      });
      if (res) {
        // console.log(res.json())
        var fileDownload = require('js-file-download')
        fileDownload(res, '大件合并发货列表.xls')
      }
      this.loading = false;
    },
    async bigExpres(params) {
      this.loading = true;
      // 请求案例
      var formdata = new FormData()
      let resData = await this.$store.dispatch("bigExpres", {
        formdata
      });
      if (resData.success) {
        this.$message({
          message: '导入成功',
          type: 'success'
        })
        this.GetTbExchangeBigNumList(this.searchForm);
      } else {
        this.$message.error(res.ErrorMessage || '网络异常');
      }
      this.loading = false;
    },
    currentPage(page) {
      this.page = page;
      this.GetTbExchangeBigNumList(this.searchForm);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/varibles.scss";
.btnAdd {
  margin-bottom: $btnHeight;
  color: #ffff;
}
.btnwarning {
  color: $btnwarning;
}

.pageBox {
  padding-top: 10px;
  clear: both;
  .el-pagination {
    float: right;
  }

  .clear {
    clear: both;
  }
}
</style>
